import React, { memo, use, useEffect, useMemo, useState } from 'react'
import './view.css'
import { Button, Descriptions, Input, Table, type DescriptionsProps,  } from 'antd'

const View = () => {
    const [loading, setLoading] = useState(true)
    const [dataSource, setDataSource] = useState([
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
        }
    ])
    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
    ]

    const [num, setNum] = useState(0)
    const value = useMemo(() => {
        console.log('useMemo')
        return <div style={{color: num >=4? 'red' : 'blue'}}>{num}</div>
    }, [num])
    
    const [items, setItems] = useState<DescriptionsProps['items']>([
        {
          key: '1',
          label: 'UserName',
          children: 'Zhou Maomao',
        },
        {
          key: '2',
          label: 'Telephone',
          children: '1810000000',
        },
        {
          key: '3',
          label: 'Live',
          children: 'Hangzhou, Zhejiang',
        },
        {
          key: '4',
          label: 'Remark',
          children: 'empty',
        },
        {
          key: '5',
          label: 'Address',
          children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
        },
      ]);

      const clickMyView = () => {
        setNum(num + 1)
        console.log('clickMyView', num)
      }


    useEffect(() => {
        // setTimeout(() => {
        //     dataSource.push({
        //         key: '3',
        //         name: 'Joe Black',
        //         age: 32,
        //         address: 'Sydney No. 1 Lake Park',
        //     })
        //     setDataSource(dataSource)
        //     if(items?.length){
        //         items[0].children = 'UserName01'
        //     }
        //     setItems(prev => {
        //         if(prev)
        //         prev[0].children = 'UserName01'
        //         return prev
        //     })
        //     setLoading(false)
        // }, 2000)
    },[])

    return (
        <>
        {value}
        <Button onClick={clickMyView} type='primary'>Click</Button>
            <div className={'myView'} >
                <Descriptions title="User Info" items={items}/>
            </div>
            <Table columns={columns} dataSource={dataSource} loading={loading}/>
        </>
    )
}

export default View